import TodoList from "./components/TodoList";
import TodoInput from "./components/TodoInput";
import { useState } from "react";


export default function App() {
  const [todoInputValue, setTodoInputValue] = useState("");
  const [todoListValue, setTodoListValue] = useState<{
    id: string,
    todoDesc: string,
    isCompleted: boolean,
  }[]>([]);


  const todoListCompletedCount = todoListValue.filter((todo) => todo.isCompleted).length;

  
  const handleTodoItemEnter = (value: string) => {
    setTodoListValue([
      {
        id: Math.random().toString(16),
        todoDesc: value,
        isCompleted: false,
      },
      ...todoListValue,
    ])
  }
  
  const handleToggleTodoStatus = (id: string) => {
    const _todo = todoListValue.map((item) => {
      if (item.id === id) {
        item.isCompleted = !item.isCompleted
        return item;
      }
      return item;
    })

    setTodoListValue(_todo);
  }

  return (
    <div>
      <TodoInput
        todoInput={todoInputValue}
        onTodoInputChange={setTodoInputValue}
        onTodoInputEnter={handleTodoItemEnter}
      ></TodoInput>

      <TodoList
        todoList={todoListValue}
        onToggleTodoItemStatus={handleToggleTodoStatus}
      ></TodoList>

      <h2>
        { todoListCompletedCount } / { todoListValue.length }
      </h2>

    </div>
  )
}